<template>
  <view class="empty-com-page" :style="state.style">
    <view class="empty-wrap">
      <image class="pic" src="~@/static/images/common/no-more.png" mode="" />
      <view class="text">{{ props.empty.text }}</view>
      <view class="btn" @click="goHerf()">
        {{ props.empty.btn }}
        <button
          v-if="props.empty.btnType"
          class="open-type-btn"
          :open-type="props.empty.btnType"
          @getphonenumber="proxy.$utils.getPhoneNumber"
        ></button>
      </view>
    </view>
  </view>
</template>
<script setup lang="ts">
/**
 * 模块引入
 */
import { reactive, getCurrentInstance, onMounted, nextTick } from "vue";
const { proxy } = getCurrentInstance();
/**
 * 接口
 */
/**
 * 父组件数据
 */
const props = defineProps({
  empty: {
    type: Object,
    default: {},
  },
});
/**
 * 数据
 */
const state = reactive({
  style: {},
});
/**
 * 初始方法
 */
onMounted(() => {
  handStyle();
});
/**
 * 功能方法
 */
const handStyle = () => {
  nextTick(() => {
    state.style = {
      "min-height":
        props.empty.height || `${proxy.$config.systemInfo().windowHeight}px`, //设置页面默认高度，撑开整个屏幕
    };
  });
};
const goHerf = () => {
  if (props.empty.btnType) {
    return;
  }
  proxy.$utils.goHerf(props.empty.link, props.empty.isTabbar ? "tabbar" : "");
};
/**
 * 父组件方法
 * const emit = defineEmits(['function']);
 * emit('function', data);
 */
/**
 * 父组件传递生命周期方法
 * onShareAppMessage  分享好友
 * onShareTimeline 分享朋友圈
 * onReachBottom 页面内触底
 */
/**
 * 暴露子组件方法
 * defineExpose({childFn})
 */
</script>
<style lang="scss" scoped>
@import url("@/static/css/theme.scss");
.empty-com-page {
  position: relative;
  width: 750rpx;
  .empty-wrap {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
    .pic {
      width: 288rpx;
      height: 314rpx;
    }
    .text {
      white-space: nowrap;
      margin-top: 56rpx;
      font-size: 28rpx;
      font-weight: 400;
      color: #333333;
      line-height: 40rpx;
    }
    .btn {
      margin-top: 58rpx;
      padding: 14rpx 32rpx;
      font-size: 28rpx;
      font-weight: 500;
      color: #1d54f9;
      line-height: 40rpx;
      background: #f1f3ff;
      border-radius: 8rpx;
    }
  }
}
</style>
